<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-01-24 15:25:31
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-02-26 10:03:41
 * @FilePath: \ZHGD-Vue2\src\views\waterStability\statistics\dosageAnalysis.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="dosageAnalysis">
        <el-row :gutter="20">
            <el-col class="aaa" :span="show ? rowObj.T1 : rowObj.F1" :xs="show ? rowObj.T2 : rowObj.F2">
                <workSiteLeft ref="workSiteLeft" :show="show" @showLeft="showLeft" @queryVal="queryVal" />
            </el-col>
            <el-col :span="show ? rowObj.T3 : rowObj.F3" :xs="show ? rowObj.T4 : rowObj.F4">
                <el-form :inline="true" :model="queryParams" size="small">
                    <el-button style="margin: 3px 8px 0 0;" size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
                        circle @click="showLeft(show)"></el-button>
                    <el-form-item label="养护基地">
                        <el-input style="width: 130px" v-model="queryParams.baseCode" placeholder="养护基地"
                            clearable></el-input>
                        <!-- <zhjd-select-deptbase v-model="queryParams.baseCode" clearable></zhjd-select-deptbase> -->
                    </el-form-item>
                    <el-form-item label="选择时间">
                        <el-select filterable v-model="queryParams.reportType" style="width: 100px; margin-right: 8px"
                            :popper-append-to-body="false">
                            <el-option label="投产以来" value="all"></el-option>
                            <el-option label="按年" value="year"></el-option>
                            <el-option label="自定义" value="other"></el-option>
                        </el-select>
                        <deatetime v-if="'other' == queryParams.reportType" ref="deatetime" v-model="queryParams.timeRange">
                        </deatetime>
                        <el-date-picker style="width: 130px" v-if="'year' == queryParams.reportType"
                            v-model="queryParams.year" value-format="yyyy" format="yyyy" type="year"
                            placeholder="选择年"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" type="primary" @click="handleQuery(true)">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="dataList" border size="mini" highlight-current-row stripe>
                    <el-table-column prop="countCycle" label="统计周期" align="center" width="120px"></el-table-column>
                    <el-table-column prop="stationName" label="拌合楼" align="center"
                        :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="batchWeight" label="水稳产量(吨)" align="center"></el-table-column>
                    <el-table-column prop="powderWeight" label="水泥用量(吨)" align="center"></el-table-column>
                    <el-table-column prop="gravelWeight" label="石料用量(吨)" align="center"></el-table-column>
                    <el-table-column prop="waterWeight" label="水用量(吨)" align="center"></el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />


            </el-col>
        </el-row>
    </div>
</template>
  
<script>

import {
    getLastYear,
    pageMaterielConsume,
} from "@/api/waterStability/statistics/dosageAnalysis";
import deatetime from "@/components/Datetime";
import workSiteLeft from "@/views/components/workSiteLeft";
export default {
    name: 'dosageAnalysis', // 材料用量分析
    components: {
        deatetime,
        workSiteLeft
    },
    data() {
        return {
            show: true,
            rowObj: {
                T1: 3,
                T2: 24,
                T3: 21,
                T4: 24,
                F1: 0,
                F2: 0,
                F3: 24,
                F4: 24,
            },
            cementListData: [],
            quListData: [],
            total: 0,
            queryParams: {
                reportType: 'all',
                baseCode: undefined,
                year: undefined,
                timeRange: [undefined, undefined],
                pageNum: 1,
                pageSize: 10,
            },
            dataList: [],
            loading: false,
        };
    },
    mounted() {
        this.getLastYearApi();
    },
    methods: {
        showLeft(show) {
            this.show = !show;
        },
        queryVal(val) {
            this.queryParams.id = val.id;
            this.handleQuery();
        },
        /**
        * 获取最新年份数据
        */
        getLastYearApi() {
            // 获取年份
            this.queryParams.year = undefined;
            getLastYear({
                baseCode: this.queryParams.baseCode
            }).then((res) => {
                if (!!res.data) {
                    this.queryParams.reportType = 'year';
                    this.queryParams.year = res.data[0];;
                    this.getList();
                }
            });
        },
        getList() {
            this.loading = true;
            pageMaterielConsume(this.queryParams).then((response) => {
                this.dataList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        handleQuery() {
            this.queryParams = this.getSearchParams();
            this.queryParams.pageNum = 1;
            this.getList();
        },
        getSearchParams() {
            const params = {};
            for (const key in this.queryParams) {
                if (key === "time") {
                    const time = this.queryParams[key];
                    if (time && time.length === 2) {
                        params.startTime = time[0];
                        params.endTime = time[1];
                    }
                } else {
                    params[key] = this.queryParams[key];
                }
            }
            return params;
        },
    }
};
</script>
  
<style scoped lang="scss" >
.dosageAnalysis {
    padding: 16px;
}
</style>